<template>
  <view class="model">
    <view class="content">
      <img
        class="model_box"
        :src="imagePath"
        @click="imgClick"
      />
      <img
        class="close"
        src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2405/22/51MXx5hagc0x5qlDfmeqDuvGht82xPaacfKWGNcC.png"
        @click="close"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    homeModelPath: {
      type: String,
    },
  },
  data() {
    return {};
  },
  computed: {
    imagePath() {
      return this.homeModelPath ? this.homeModelPath : "https://copartner.oss-cn-beijing.aliyuncs.com/logo/2405/22/Thoc0c39JCJRCe1JoextNGlg8KlGHIBFvcwKbv9C.png"
    }
  },
  methods:{
    // 关闭
    close(){
      this.$emit('close');
    },
    // 点击图片
    imgClick() {
      this.$emit('imgClick');
    },
  }
};
</script>

<style lang="scss" scoped>
.model {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    .model_box {
      width: 594rpx;
      height: 732rpx;
      text-align: center;
    }
    .close {
      width: 52rpx;
      height: 52rpx;
      margin-top: 10rpx;
    }
  }
}
</style>